import React, { FC } from 'react';
import { View, Text, Input } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
export interface IProps extends ICompProps {
    /**双向绑定输入值 */
    value?: string;
    /** onBlur*/
    onBlur?: Function;
    /** onChange事件*/
    onChange?: Function;
    /** 输入字符最大长度*/
    maxLength?: number;
    /**占位符 */
    placeholder?: string;
    /**输入框类型 */
    type?: 'number' | 'text' | 'idcard' | 'digit' | 'safe-password' | 'nickname';
    /**输入框内部插槽 */
    inputAppendSlot?: React.ReactNode;
}
MyInput.defaultProps = {
    value: '',
    placeholder: '请输入',
    type: 'text',
    onBlur: () => {},
    onChange: () => {},
} as Partial<IProps>;
function MyInput(props: IProps) {
    const { className, style, value, onChange, onBlur, maxLength, placeholder, type, inputAppendSlot } = props;
    const localClassName = useClassName('MyInput', className);
    return (
        <RootView className={localClassName} style={style}>
            <View className="MyInput_wrap">
                <Input
                    className="MyInput_container"
                    value={value}
                    onInput={(event) => onChange(event)}
                    onBlur={(event) => onBlur(event)}
                    placeholder={placeholder}
                    maxlength={maxLength}
                    type={type}></Input>
                <View className="MyInput_append">{inputAppendSlot}</View>
            </View>
        </RootView>
    );
}
export default React.memo(MyInput as FC<IProps>);
const RootView = styled(View)`
    &.MyInput {
        .MyInput_wrap {
            position: relative;
            > .MyInput_append {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        .MyInput_container {
            padding: 20px 32px 20px 32px;
            width: 100%;
            box-sizing: border-box;
            background: #f5f5f5;
            font-size: 32px;
            height: 90px;
            border-radius: 16px;
            > .weui-input::placeholder {
                font-size: 27px;
                color: #cbcdd6;
                letter-spacing: 2px;
            }
        }
    }
`;
